<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MIXIN</title>
</head>
<body>
<script src="../js/react.min.js"></script>
<script src="../js/react-dom.min.js"></script>
<script src="../js/JSXTransformer.js"></script>
<script type="text/jsx">
  "use strict"

  // Mixin
  const BindingMixin = {
    handleChange(key) {
      return (event) => {
        this.setState({ [key]: event.target.value})
      }
    }
  }

  const SignupForm = React.createClass({
    mixins: [BindingMixin],
    getInitialState() {
      return {
        name: '',
        comment: ''
      }
    },
    render() {
      console.log(this.state);
      return <div>
          <input type="text" onChange={ this.handleChange('name') }/>
          <input type="text" onChange={ this.handleChange('comment') }/>
        </div>
    }
  })

  ReactDOM.render(<SignupForm/>, document.body)

</script>
</body>
</html>